<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      cdata: {
        xData: ["照明", "新风", "排风", "控制器", "空调"],
        seriesData: [
          { value: 0, name: "照明" },
          { value: 0, name: "新风" },
          { value: 0, name: "控制器" },
          { value: 0, name: "排风" },
          { value: 0, name: "空调" }
        ]
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
  },
  methods: {
  },
  watch: {
    chartData: {
      handler (newData) {
        if (newData === null || typeof(newData.faultDevice) === 'undefined'){
          return
        }
        const faultDevice = newData.faultDevice
        const xData = []
        const seriesData = []
        for (const faultDeviceElement of faultDevice) {
            xData.push(faultDeviceElement.device.deviceName)
            seriesData.push({ value: faultDeviceElement.fault, name: faultDeviceElement.device.deviceName })
        }
        this.cdata = {
          xData: xData,
          seriesData: seriesData
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
